<template>
    <div style="overflow:auto">
        <h2 style="height:40px;background:#000;color:#fff;text-align:center;line-height:40px">当前订单进度</h2>
        <van-steps
  :active="active"
  active-icon="success"
  active-color="#38f"
>
  <van-step>买家下单</van-step>
  <van-step>完成支付</van-step>
  <van-step>商家核对订单</van-step>
  <van-step>等待发货</van-step>
</van-steps>
<div>
    <van-steps direction="vertical" :active="0">
  <!-- <van-step>
    <h3>【城市】物流状态1</h3>
    <p>2016-07-12 12:40</p>
  </van-step> -->
  <van-step>
    <h3>买家完成支付</h3>
    <p>2019-11-11 11：21</p>
  </van-step>
  <van-step>
    <h3>买家下单</h3>
    <p>2019-11-11 11：11</p>
  </van-step>
</van-steps>
</div>
<div style='padding:6% 20% 5% 20%;display:flex;justify-content:space-around'>
<van-button color="blue" size="small" @click="getOrder">查看订单</van-button>
<van-button color="#05f" size='small' @click="getHome">继续购物</van-button>
</div>
<div><img src="https://resource.smartisan.com/resource/2ac0e92a2dea54340cac7f93bfd61820.png?x-oss-process=image/resize,w_700/format,webp" alt="" style="width:100%"></div>
<div style="overflow:auto"><underList :underList="underList"/></div>
    </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import { Step, Steps, Button } from 'vant'
import underList from '@/components/Underlist'
Vue.use(Step).use(Steps).use(Button)
export default {
  data () {
    return {
      active: 1,
      underList: []
    }
  },
  components: {
    underList
  },
  created () {
    axios.get('/pro?pageCode=1').then(res => {
      this.underList = res.data.data
    })
  },
  methods: {
    getOrder () {
      this.$router.push('/order')
    },
    getHome () {
      this.$router.push('/home')
    }
  }
}
</script>
